<template>
  <div>
 
    <ProductParams :title="productList.name">
      <template v-slot:buy>
        <button class="btn" @click="buy">立即购买</button>
      </template>
    </ProductParams>
    <div class="content">
      <div class="item-bg">
        <h2>{{ productList.name }}</h2>
        <h3>{{ productList.subtitle }}</h3>
        <p>
          <a href="" id="">全球首款双频 GP</a>
          <span>|</span>
          <a href="" id="">骁龙845</a>
          <span>|</span>
          <a href="" id="">AI 变焦双摄</a>
          <span>|</span>
          <a href="" id="">红外人脸识别</a>
        </p>
        <div class="price">
          <span
            >￥<em>{{ productList.price }}</em></span
          >
        </div>
      </div>
      <div class="item-bg-2"></div>
      <div class="item-bg-3"></div>
    </div>
    <Carousel :list="bannerList" />
    <div class="item-video">
      <div class="video-bg" @click="showSlide = true"></div>
      <div class="video-box"  >
        <div class="mask" v-show="showSlide"></div>
        <div class="video" :class="{ slide: showSlide }">
          <span class="icon-close" @click="showSlide = false"></span>
          <video
            src="../../../public/video.mp4"
            muted
            autoplay
            controls="controls"
          ></video>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { swiper, swiperSlide } from "vue-awesome-swiper";

import requests from "@/api/ajax";
import mockRequests from "@/api/mockAjax";
import ProductParams from "@/components/ProductParams";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Product",
  components: {
    ProductParams,
  },
  data() {
    return {
      showSlide: false, //控制动画效果

      productList: {},
      bannerList: [],
    };
  },
  mounted() {
    this.getProductInfo();
    ///========================================
    mockRequests.get("/gall").then((res) => {
      console.log(res);
      this.bannerList = res.data;
    });
  },
  methods: {
    getProductInfo() {
      let id = this.$route.params.id;
      requests.get(`/products/${id}`).then((res) => {
        console.log(res);
        this.productList = res.data;
      });
    },
    buy(){
       let id = this.$route.params.id;
       this.$router.push(`/detail/${id}`)
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets//scss/mixin";
.swiper-container {
  margin: 36px auto 52px;
  width: 1226px;
  height: 330px;

  .desc {
    font-size: 18px;
    color: #333333;
    text-align: center;
  }
}
.btn {
  margin-left: 20px;
}
.content {
  .item-bg {
    @include bgImg(100%, 718px, "../../../public/imgs/product/product-bg-1.png",cover)
      text-align: center;
    h2 {
      font-size: 80px;
      margin-top: 55px;
    }
    h3 {
      font-size: 24px;
      letter-spacing: 10px;
    }
    p {
      margin-top: 21px;
      margin-bottom: 40px;
      a {
        font-size: 16px;
        color: #333333;
      }
      span {
        margin: 0 15px;
      }
    }
  }
  .item-bg-2 {
    @include bgImg(
      100%,
      480px,
      "../../../public/imgs/product/product-bg-2.png"
    );
  }
  .item-bg-3 {
    @include bgImg(
      100%,
      638px,
      "../../../public/imgs/product/product-bg-3.png",
      cover
    );
  }
}
.video-bg {
  @include bgImg(
    1226px,
    540px,
    "../../../public//imgs/product/gallery-1.png",
    cover
  );
  margin: 0 auto 120px;
  display: block;
  cursor: pointer;
}
.video-box {
// 点击bg可以出现，如果设置了
//     @include position(fixed);点不到b蒽来就有一个是点击以下整个moal组件出现
 
  .mask { z-index: 20;
    @include position(fixed);
    background-color: #333333;
    opacity: 0.5;
  }
  .video {
    @include juzhong(fixed);
    z-index: 20;
    width: 1000px;
    height: 536px;
    top: -50%;
    opacity: 0;
    transition: all 0.5s;
    &.slide {
      top: 50%;
      opacity: 1;
    }
    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      outline: none;
    }
    .icon-close {
      @include positionImg(
        absolute,
        20px,
        20px,
        20px,
        20px,
        "../../../public/imgs/icon-close.png"
      );
      cursor: pointer;
      z-index: 21;
    }
  }
}
</style>
